<template>
  <div class="c-bg-sgray c-ph24 c-pt24">
    <div class="c-bg-white c-hh240 c-flex-row c-br20">
      <div v-if="isTeacher != 1" class="c-flex-column c-flex-center c-flex-grow1 c-w0">
        <div class="bg-orange-linear-gradient c-ww80 c-hh80 c-flex-row c-flex-center">
          <i class="iconfont c-fc-white c-fs32">&#xe848;</i>
        </div>
        <div class="c-fc-sblack c-fs20 c-pv20">已闯关</div>
        <div class="c-fs24">{{hasBreak}}</div>
      </div>
      <div class="c-flex-column c-flex-center c-flex-grow1 c-w0">
        <div class="bg-blue-linear-gradient c-ww80 c-hh80 c-flex-row c-flex-center">
          <i class="iconfont c-fc-white c-fs32">&#xe84a;</i>
        </div>
        <div class="c-fc-sblack c-fs20 c-pv20">总课时</div>
        <div class="c-fs24">{{allWorkNum}}</div>
      </div>
    </div>
    <div class="c-pt20 c-pb16 c-fs20 c-fc-gray">
      <span v-if="isTeacher != 1">已闯关：</span>
      <span v-if="isTeacher != 1" class="c-fc-sorange">{{hasBreak}}</span>
    </div>
    <div>
      <div @click="clickGoWork(index)" class="c-bg-white c-ph30 c-mb20 c-hh120 c-br20 c-fs22 c-flex-row c-aligni-center" v-for="(item,index) in levelList" :key="index">
        <div v-if="item.isUnlock" class="bg-orange-linear-gradient c-ww40 c-hh40 c-flex-row c-flex-center">
          <i class="iconfont c-fc-white c-fs20">&#xe848;</i>
        </div>
        <div v-else class="c-bg-ccc c-brp50 c-ww40 c-hh40 c-flex-row c-flex-center">
          <i class="iconfont c-fc-white c-fs20">&#xe84d;</i>
        </div>
        <div class="c-flex-grow1 c-w0  c-pl32">
          <div class="c-fs26 c-fc-xblack">第{{item.reorder}}课时</div>
          <div class="c-fs22 c-mt20 c-fc-sblack">{{item.hasMan}}人已完成</div>
        </div>
        <div :class="item.isUnlock ? 'c-fc-green' : index == hasBreak ? 'c-fc-sorange':'c-fc-sgray'" v-if="isTeacher != 1">{{item.isUnlock ? '已闯关' : index == hasBreak ? '待闯关':'未闯关'}}</div>
        <div class="c-fc-sblack" v-else>已提交：{{item.hasMan || 0}}人</div>
      </div>
      <loading-status-tem :dataStatus="dataStatus"></loading-status-tem>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import {
  utilJs
} from "@/utils/common.js";
const LIMIT = 10;
let hasRead = ''
let pageIndex = 1;
let clockInId = '';
export default {
  name: "LevelList",
  components: {
    loadingStatusTem
  },
  props: [],
  data() {
    return {
      dataStatus: 'HAS_MORE_DATA',
      isTeacher: 0,
      hasBreak: 0,
      allWorkNum: 0,
      levelList: []
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    clickGoWork(index) {
      let hwId = this.levelList[index].hwId;
      if (this.isTeacher == 1 || this.levelList[index].isUnlock == 1 || (this.levelList[index].isUnlock == 0 && index == this.hasBreak)) {
        this.$routerGo(this, "push", {
          path: `/homePage/clockIn/stuHomeWork?workType=3&curId=${hwId}&clockInId=${clockInId}`
        });
      } else {
        this.$showCjToast({
          text: "请先打卡上一个课时",
          type: "warn",
        });
      }
    },
    getLevelList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}signCard/blockadeList/${clockInId}?page=${pageIndex}&limit=${LIMIT}&hasRead=${hasRead}`,
        res => {
          if (res.isExist == 0) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "",
                info: "该打卡作业本已下架，请联系管理员！"
              }
            });
            return;
          }
          if (!res.permission) {
            this.$routerGo(this, "replace", {
              path: "/homePage/clockIn/clockInDetail",
              query: {
                clockInId: clockInId
              }
            });
            return;
          }
          if (pageIndex == 1) {
            this.hasBreak = res.hasBreak;
            this.allWorkNum = res.allWorkNum;
            this.isTeacher = res.isTeacher;
            this.levelList = res.dataList.data;
          } else {
            this.levelList = [...this.levelList, ...res.dataList.data];
          }
          if (res.dataList.to * 1 == res.dataList.total * 1) {
            this.dataStatus = res.dataList.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare() {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShareInfo") ? JSON.parse(localStorage.getItem("homeWorkShareInfo")) : shareIndexData;
      utilJs.wechatConfig(
        shareData.shareUrl,
        shareData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare() {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShareInfo") ? JSON.parse(localStorage.getItem("homeWorkShareInfo")) : shareIndexData;
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.levelList.length > 0) {
          this.getLevelList();
        }
      });
    },
  },
  activated() {
    setDocumentTitle("关卡列表");// eslint-disable-line
    pageIndex = 1;
    clockInId = this.$route.query.clockInId;
    hasRead = this.$route.query.clockInId || []
    this.dataStatus = 'HAS_MORE_DATA';
    this.levelList = [];
    this.getLevelList();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-orange-linear-gradient {
  background: linear-gradient(#ff8920, #ffc26b); /* 标准的语法 */
  box-shadow: 0px 2px 8px 0px rgba(255, 141, 37, 0.5);
  border-radius: 50%;
}
.bg-blue-linear-gradient {
  background: linear-gradient(#2d8bff, #33b9ff); /* 标准的语法 */
  box-shadow: 0px 2px 8px 0px rgba(48, 159, 255, 0.5);
  border-radius: 50%;
}
</style>
